import React, { useEffect, useState } from 'react';
import { Box, Flex, Image, Text } from '@chakra-ui/react';
import goBack from '@/assets/img/goBack.png';

import { useRouter } from 'next/router';
import { queryNoticeDetail } from '@/services/product';
import { useDispatch } from 'react-redux';
import { useAccount } from 'wagmi';

const NoticeDetail = () => {

  const [noticeInfo, setNoticeInfo] = useState({} as NoticeList);
  const router = useRouter();
  const { id: noticeId } = router.query; // 根据传参获取公告内容
  const dispatch = useDispatch()
  const { address, isConnected } = useAccount();

  useEffect(() => {
    queryNoticeDetail({ id: noticeId as string, address }).then((res: ApiRes) => {
      setNoticeInfo(res.data as NoticeList)
    })
  }, [])

  //更新地址
  useEffect(() => {
    if (address) {
      dispatch({ type: 'ADDRESS', payload: address })
    }
  }, [address])

  return (
    <Box p={'40px 20px'} w={'100%'} boxSizing="border-box">
      <Box bgColor={'white'} minH={'80vh'} p={'18px 15px'} borderRadius={4}>
        <Flex>
          <Image src={goBack.src} w={20} h={18} alt={'go_back'} onClick={() => router.back()}></Image>
          <Box flex={1} textAlign={'center'}>
            {noticeInfo?.title}
          </Box>
        </Flex>
        {/* 内容 */}
        <Box mt={24}>
          {/* <Text m={0} fontSize={15} lineHeight={'24px'}> */}
          {/* {noticeInfo.content} */}
          <div dangerouslySetInnerHTML={{ __html: noticeInfo?.content }}></div>
          {/* </Text> */}
        </Box>
      </Box>
    </Box>
  );
};

export default NoticeDetail;
